iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0

Phaser3-project-template

Phaser 3 有提供 template 給大家使用 Phaser 3 Webpack Project Template

環境需先安裝 node,安裝後,在該資料夾 npm i 和 npm start 之後,就會看到以下畫面;今天我們會使用該 template 來練習。
https://ithelp.ithome.com.tw/upload/images/20181110/20111617vJhaWXTB9w.png

Javascript 內容

preload() {
    // 載入昨天製作的 json 檔案
    this.load.tilemapTiledJSON('level', 'assets/level.json')
    this.load.spritesheet('RPGpack_sheet', 'assets/RPGpack_sheet.png', {
        frameWidth: 64,
        frameHeight: 64
    })
}
create() {
    this.map = this.make.tilemap({ key: 'level' })
    this.tiles = this.map.addTilesetImage('RPGpack_sheet')
    // 昨天使用 Tiled Map Editor 做的 Background 圖層
    this.backgroundLayer = this.map.createStaticLayer('Background', this.tiles, 0, 0)

    // 昨天使用 Tiled Map Editor 做的 Blocked 圖層
    this.blockedLayer = this.map.createStaticLayer('Blocked', this.tiles, 0, 0)
}

結論

今天我們使用到了 Phaser 3 提供一個 template,給開發者使用;並嘗試著把昨天製作出來的 json 檔案匯入到遊戲中。


今天就先到這裡,我們明天見。


上一篇
Day 25:Tiled Map Editor
下一篇
Day 27:Phaser3-project-template [ 2 / 2 ]
系列文
Phaser 幫我撐個 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言